<template>
  <div class="app">
    <div class="tabberLeft">
        <div class="tabber" @click="changeList(index)" :class="{active:currentIndex==index}" v-for="(item,index) in tabs" :key="index">{{item.tabberName}}</div>
    </div>
  </div>
</template>

<script>
import eventBus from "../utils/tools"
export default {
    data(){    
        return {
            currentIndex:0,
            tabs:[]
        }
    },
    mounted(){
        eventBus.$on("Rmsg",(msg)=>{
            this.tabs=msg
        })
    },
    methods:{
        changeList(index){
            this.currentIndex=index
            eventBus.$emit("Lmsg",index)
        }
    }
}
</script>

<style>
.tabber{
    margin-top: 60px;
    width: 70px;
    border-left: 2px solid transparent;
}
.active{
    border-left: 2px solid red;
}
</style>